<template>
	<view class="container">

		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索" :show-action="false" :clearabled="false" :animation="false" shape="round"
					bgColor="#FFFFFF" height="72rpx" searchIconColor="#999999" placeholderColor="#999999" :inputStyle="{
						color: '#333333',
						backgroundColor: '#FFFFFF',
					}" v-model="queryparams.keyword" @clickIcon="handleSearch" @search="handleSearch"></u-search>
			</view>

			<!-- 筛选区域 -->
			<view class="filter-tabs">
				<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in filterTabs" :key="index" @click="handleFilter(index)">
						<text :class="['tab-text', currentTab === index ? 'active' : '']">{{ item.name }}</text>
						<u-icon :name="currentTab === index ? 'arrow-up' : 'arrow-down'" size="12"
							:color="currentTab === index ? '#2979ff' : '#666'"></u-icon>
					</view>
				</view>
				<!-- 下拉内容 -->

			</view>

			<!-- 商铺列表 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="toShopDetail(item.id)">
					<!-- 左侧图片区域 -->
					<view class="shop-img-wrap">
						<view class="shop-tag">商铺</view>
						<image :src="item.images[0]" class="shop-img" mode="aspectFill"></image>
					</view>
					<!-- 右侧信息区域 -->
					<view class="shop-info">
						<text class="shop-title">{{ item.name }}</text>

						<view class="shop-attrs">
							<text>{{ item.floor }}层</text>
							<text>{{ item.area }}m²</text>
							<text>{{ item.house_type_text }}</text>
						</view>
						<view class="shop-tags">
							<text v-for="(tag, tagIndex) in item.tags_text" :key="tagIndex" class="tag">{{ tag }}</text>
						</view>
						<view class="shop-price">
							<text class="price">¥{{ item.rent }}</text>
							<text class="unit">/月</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" style="background-color: #ffffff;">
			<view class="filter_box" style="background-color: #ffffff;">
				<view class="filter_option">
					<view class="option-item1" v-if="currentTab==0">
						<view class="filter_option_item" :class="{active: filterTabs[0].value === i+1 }"
							v-for="(item,i) in sortList" @click="selectOption1(item)">
							{{item.label}}
						</view>
					</view>
					<view class="two_level_option" v-if="currentTab==1">
						<view class="options">
							<view class="leftoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="lefttext" @click="leftTab('',0)" :class="{active: leftcurrentTab === 0}">全部区域</view>
									<view class="lefttext" :key="item.value" v-for="(item,i) in communityList"
										@click="leftTab(item.value,i+1)" :class="{active: leftcurrentTab === i+1}">
										{{item.name}}
									</view>
								</scroll-view>
							</view>
							<view class="rightoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="righttext" :key="item.id" v-for="(item,i) in streetList" @click="rightTab(item,i)"
										:class="{active: rightcurrentTab === i}">{{item.name}}</view>
								</scroll-view>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="areaCancel">重置</view>
							<view class="btn primary-btn" @click="areaConfirm">确定</view>
						</view>
					</view>
					<view class="rent_type" v-if="currentTab==2">
						<view class="rent_type_option">
							<view class="options" :class="{active: rentcurrentTab === i}" :key="i" v-for="(item,i) in rentTypeOption"
								@click="handleRentSelect(item,i)">
								{{item}}
							</view>
						</view>
						<view class="custom_rent">
							<view class="title"> 自定义价格 </view>
							<view class="slider">
								<u-slider v-model="customRentValue" step="100" min="0" max="10000"
									@change="customRentChange"></u-slider>
							</view>
							<view class="show_value">
								<text>0</text>
								<text>{{customRentValue}}元</text>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="rentTypeCancel">重置</view>
							<view class="btn primary-btn" @click="rentTypeConfirm">确定</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-loadmore :status="status" style="margin-top: 20px;" />
	</view>
</template>

<script>
	import {
		getShopOfficeLists
	} from '@/api/houseresources.js'
	import {
		getArea,
		getTagList
	} from '@/api/gent.js'
	import {
		getHouseOptionList
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				status: 'loadmore',
				queryparams: {
					page: 1,
					page_size: 10
				},
				form: {
					community: '',
					street: '',
					rent: '',
					keyword: '',
				},
				showDropdown: false,
				currentTab: 0,
				filterTabs: [{
						name: "综合排序",
						value: "1",

					},
					{
						name: "区域",
						value: "",

					},
					{
						name: "租金",
						value: "",

					},
					// {
					// 	name: "面积",
					// 	value: "",
					// 	options: [{
					// 			label: "全部",
					// 			value: "all"
					// 		},
					// 		{
					// 			label: "50㎡以下",
					// 			value: "0-50"
					// 		},
					// 		{
					// 			label: "50-100㎡",
					// 			value: "50-100"
					// 		},
					// 		{
					// 			label: "100-200㎡",
					// 			value: "100-200"
					// 		},
					// 		{
					// 			label: "200㎡以上",
					// 			value: "200-999999"
					// 		},
					// 	],
					// },
				],
				currentTab: null,
				leftcurrentTab: 0,
				rightcurrentTab: -1,
				rentcurrentTab: 0,
				sortList: [{
					label: "综合排序",
					value: 1,
				}, {
					label: "最新发布",
					value: 2,
				}, {
					label: "好评优先",
					value: 3,
				}, {
					label: "价格(从低到高)",
					value: 4,
				}, {
					label: "价格(从高到低)",
					value: 5,
				}, {
					label: "面积(从小到大)",
					value: 6,
				}, {
					label: "面积(从大到小)",
					value: 7,
				}, {
					label: "楼层(从高到低)",
					value: 8,
				}, {
					label: "楼层(从低到高)",
					value: 9,
				}],
				streetList: [],
				communityList: [],

				rentTypeOption: [
					'不限',
					'1000元以下',
					'1000元-2000元',
					'2000元-3000元',
					'3000元-5000元',
					'5000元以上'
				],
				customRentValue: 0,
				areaList: [{
						name: '特色标签',
						type: 1,
						options: []
					},
					{
						name: '装修',
						type: 2,
						options: [{
							name: '精装修',
							value: 2,
							ischeck: false
						}, {
							name: '普通装修',
							value: 1,
							ischeck: false
						}]
					},
					{
						name: '付款',
						type: 3,
						options: [{
							name: '押一付三',
							value: 1,
							ischeck: false
						}, {
							name: '押二付一',
							value: 2,
							ischeck: false
						}, {
							name: '押三付一',
							value: 3,
							ischeck: false
						}, {
							name: '押一付二',
							value: 4,
							ischeck: false
						}]
					},
				],
				shopList: [

				],
			};
		},
		onLoad(e) {
			this.form.community = e.community
			this.getList();
			this.getAreaList();
			// this.getHouseOptionLists()
		},
		methods: {
			handleFilter(index) {
				this.currentTab = index;
				this.$refs.popup.open("top");
			},
			selectOption1(option) {
				this.filterTabs[this.currentTab].name = option.label;
				this.filterTabs[this.currentTab].value = option.value;
				this.$refs.popup.close();
				this.form.order_tpe = option.value
				this.queryparams.page = 1
				this.getList()
				// 处理筛选逻辑
			},
			leftTab(id, index) {
				this.leftcurrentTab = index;
				console.log(id)
				if (id && id !== '') {
					this.form.community = id;
					this.getStreetList(id)
				} else {
					this.form.street = null;
					this.form.community = null;
					this.communityList = [];
				}
			},
			rightTab(item, index) {
				this.rightcurrentTab = index;
				this.form.street = item.id;
				this.filterTabs[this.currentTab].name = item.name;
			},
			areaCancel() {
				this.leftcurrentTab = 0;
				this.rightcurrentTab = 0;
				this.streetList = [];
				this.form.street = '';
				this.form.community = ''
				this.queryparams.page = 1
				this.getList()
				this.$refs.popup.close();
			},
			areaConfirm() {
				this.queryparams.page = 1
				this.getList()
				this.$refs.popup.close();
			},
			handleChecked(type, item) {
				item.ischeck = !item.ischeck
				if (item.ischeck) {
					if (type == 1) {
						this.form.house_type.push(item.value)
					}
					if (type == 2) {
						this.form.face.push(item.value)
					}
					if (type == 3) {
						this.form.floor.push(item.value)
					}

				} else {
					if (type == 1) {
						this.form.house_type = this.form.house_type.filter(data => data !== item.value);
					}
					if (type == 2) {
						this.form.face = this.form.face.filter(data => data !== item.value);
					}
					if (type == 3) {
						this.form.floor = this.form.floor.filter(data => data !== item.value);
					}
				}
			},
			houseTypeCancel() {
				this.houseTypeOption.forEach((item) => {
					item.options.forEach((option) => {
						option.ischeck = false
					})
				})
				this.queryparams.page = 1
				this.form.house_type = []
				this.form.face = []
				this.form.floor = []
				this.$refs.popup.close();
				this.getList()
			},
			houseTypeConfirm() {
				this.$refs.popup.close();
				this.queryparams.page = 1
				this.getList()
			},
			handleRentSelect(option, index) {
				this.rentcurrentTab = index
				switch (option) {
					case "不限":
						this.form.rent = ""
						break;
					case "1000元以下":
						this.form.rent = "0-1000"
						break;
					case "1000元-2000元":
						this.form.rent = "1000-2000"
						break;
					case "2000元-3000元":
						this.form.rent = "2000-3000"
						break;
					case "3000元-5000元":
						this.form.rent = "3000-5000"
						break;
					case "5000元以上":
						this.form.rent = "5000-99999"
						break;
				}
			},
			customRentChange(event) {
				if (event > 0) {
					this.rentcurrentTab = -1
					this.form.rent = '0-' + event
				}
			},
			rentTypeCancel() {
				this.rentcurrentTab = 0
				this.form.rent = ''
				this.$refs.popup.close();
				this.getList()
			},
			rentTypeConfirm() {
				this.$refs.popup.close();
				this.queryparams.page = 1
				this.getList()
			},
			handleTagChecked(type, item) {
				item.ischeck = !item.ischeck
				if (item.ischeck) {
					if (type == 1) {
						this.form.tags = this.form.tags.filter(data => data !== item.value);
					}
					if (type == 2) {
						console.log(item)
						this.form.decoration = item.value;
						this.tagsList[1].options.forEach((option) => {
							option.ischeck = false
						})
						item.ischeck = true;
					}
					if (type == 3) {
						this.form.payment_type = this.form.payment_type.filter(data => data !== item.value);
					}
				} else {
					if (type == 1) {
						this.form.tags = this.form.house_type.filter(data => data !== item.value);
					}
					if (type == 2) {
						this.form.face = ''
					}
					if (type == 3) {
						this.form.payment_type = this.form.payment_type.filter(data => data !== item.value);
					}
				}
			},
			tagsTypeCancel() {
				this.rentcurrentTab = 0
				this.form.tags = []
				this.form.decoration = ''
				this.form.payment_type = []
				this.$refs.popup.close();
				this.getList()
			},
			tagsTypeConfirm() {
				this.$refs.popup.close();
				this.queryparams.page = 1
				this.getList()
			},
			getAreaList(id) {
				getHouseOptionList({
					cid: 2
				}).then((res) => {
					this.communityList = Object.entries(res.data.data).map(([key, value]) => ({
						name: value,
						value: key
					}));
					console.log(this.streetList)
					if (this.form.community && this.form.community != '') {
						this.communityList.forEach((item, i) => {
							if (item.value == this.form.community) {
								this.leftTab(this.form.community, i + 1)
							}
						})
					}
				})
			},
			getStreetList(id) {
				getHouseOptionList({
					cid: 3,
					pid: id
				}).then((res) => {
					this.streetList = Object.entries(res.data.data).map(([key, value]) => ({
						name: value,
						id: key
					}));
				})
			},
			getHouseOptionLists() {
				Promise.all([
					getHouseOptionList({
						cid: 5
					}),
					getHouseOptionList({
						cid: 7
					}),
					getHouseOptionList({
						cid: 8
					})
				]).then(([res1, res2, res3]) => {
					console.log(res2)
					if (res1.data.msg == 'success') {
						this.houseTypeOption[0].options = Object.entries(res1.data.data).map(([key, value]) => ({
							name: value,
							value: key,
							ischeck: false
						}));
					}
					if (res2.data.msg == 'success') {
						this.tagsList[2].options = Object.entries(res2.data.data).map(([key, value]) => ({
							name: value,
							value: key,
							ischeck: false
						}));
					}
					if (res3.data.msg == 'success') {
						this.tagsList[0].options = Object.entries(res3.data.data).map(([key, value]) => ({
							name: value,
							value: key,
							ischeck: false
						}));
					}
				})
			},
			syncValidFields(sourceObj, targetObj) {
				// 遍历源对象的所有属性
				for (const key in sourceObj) {
					if (sourceObj.hasOwnProperty(key)) {
						const value = sourceObj[key];
						let isValid = false;

						// 判断字段有效性
						if (value !== null && value !== undefined) {
							// 处理数组/字符串类型
							if (typeof value === 'string' || Array.isArray(value)) {
								isValid = value.length > 0;
							}
							// 处理对象类型（非null且非数组）
							else if (typeof value === 'object') {
								isValid = Object.keys(value).length > 0;
							}
							// 处理基础类型
							else {
								isValid = true;
							}
						}

						// 同步到目标对象
						if (isValid) {
							targetObj[key] = value;
						} else {
							// 检查并删除无效字段
							if (targetObj.hasOwnProperty(key)) {
								delete targetObj[key];
							}
						}
					}
				}
				return targetObj;
			},
			getList() {
				this.syncValidFields(this.form, this.queryparams);
				getShopOfficeLists(this.queryparams).then((res) => {
					console.log(res.data.data.data)
					this.shopList = res.data.data.data;
					// 更新状态
					this.status = this.shopList.length < this.queryparams.page_size ? 'nomore' : 'loadmore';
					uni.stopPullDownRefresh(); // 停止下拉刷新
				})
			},
			handleSearch() {
				console.log(this.queryparams.keyword)
				this.getList()
			},
			toShopDetail(id) {
				uni.navigateTo({
					url: `/pages-house/house-detail/house-detail?id=${id}`,
				});
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.queryparams.page = 1; // 重置为第一页
				this.shopList = []; // 清空当前列表数据
				this.getList(); // 请求第一页数据
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
			//上拉加载
			onReachBottom() {
				console.log('Reached bottom. Status:', this.status);
				if (this.status === 'loading' || this.status === 'nomore') return;
				this.status = 'loading';
				this.queryparams.page++; // 增加当前页码
				this.getList();
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
	}

	.search-box {
		padding: 24rpx 32rpx;

		:deep(.u-search) {
			background-color: #ffffff !important;
			border-radius: 36rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

			.u-search__content {
				background-color: #ffffff !important;
				height: 72rpx;
				padding: 0 30rpx;

				.u-search__content__icon {
					margin-right: 8rpx;
				}

				.u-search__content__input {
					font-size: 28rpx;
				}
			}
		}
	}

	.filter-tabs {
		position: relative;
		background: #f5f6fa;

		.tab-list {
			display: flex;
			justify-content: space-around;
			padding: 24rpx 0;

			.tab-item {
				display: flex;
				align-items: center;
				position: relative;

				.tab-text {
					font-family: PingFangSC, PingFang SC;
					font-size: 26rpx;
					color: #666666;
					margin-right: 6rpx;

					&.active {
						color: #2979ff;
						font-weight: 500;
					}
				}

				// 添加第一个选项的特殊样式（综合排序）
				&:first-child {
					.tab-text {
						color: #2979ff;
					}
				}
			}
		}

	}

	.shop-list {
		padding: 24rpx;

		.shop-item {
			display: flex;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 24rpx;

			.shop-img-wrap {
				position: relative;
				width: 220rpx;
				height: 220rpx;
				margin-right: 24rpx;

				.shop-tag {
					position: absolute;
					left: 0;
					top: 0;
					background: #3b7cff;
					color: #fff;
					font-size: 24rpx;
					padding: 4rpx 16rpx;
					border-radius: 8rpx 0 8rpx 0;
					z-index: 1;
				}

				.shop-img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.shop-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				min-width: 0; // 防止文字溢出

				.shop-title {
					width: 100%;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					line-height: 30rpx;
					margin-bottom: 12rpx;
					// 文字超出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: wrap;
				}

				.shop-attrs {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 12rpx;

					text {
						position: relative;
						margin-right: 24rpx;

						&:not(:last-child)::after {
							content: "";
							position: absolute;
							right: -12rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 1px;
							height: 20rpx;
							background: #eeeeee;
						}
					}
				}

				.shop-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 8rpx;
					margin-bottom: 12rpx;

					.tag {
						font-size: 20rpx;
						color: #ff5a5f;
						background: rgba(255, 90, 95, 0.1);
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
					}
				}

				.shop-price {
					color: #ff5a5f;
					display: flex;
					align-items: baseline;

					.price {
						font-size: 32rpx;
						font-weight: 600;
					}

					.unit {
						font-size: 22rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}

	.dropdown-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	.filter_box {

		.filter_option {
			width: 100%;
			height: auto;

			.option-item1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 24rpx;

				.filter_option_item {
					width: 100%;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;

					&.active {
						color: #0095F8;
						background: #F5F6FA;
						border-radius: 36rpx;
					}
				}
			}

			.two_level_option {
				width: 100%;
				height: 800rpx;
				background-color: #ffffff;

				.options {
					display: flex;
					justify-content: flex-start;
					height: calc(100% - 168rpx);

					.leftoption {
						height: 100%;
						display: flex;
						box-sizing: border-box;
						padding: 36rpx 24rpx;
						flex-direction: column;
						justify-content: space-between;
						border-right: 4rpx solid #F5F6FA;

						.lefttext {
							width: 208rpx;
							height: 72rpx;
							box-sizing: border-box;
							line-height: 72rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
							border-radius: 12rpx;

							&.active {
								background: #F5F6FA;
								color: #0095F8;
							}
						}
					}

					.rightoption {
						height: 100%;
						flex: 1;
						display: flex;
						padding: 36rpx 24rpx;
						box-sizing: border-box;
						flex-direction: column;
						justify-content: space-between;

						.righttext {
							box-sizing: border-box;
							width: 100%;
							text-align: center;
							height: 72rpx;
							line-height: 72rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
							padding: 0 40rpx;

							&.active {
								background: #F5F6FA;
								color: #0095F8;
							}
						}
					}

					.similar-list {
						height: 100%;
					}
				}
			}

			.house_type {
				width: 100%;
				height: 880rpx;
				padding: 40rpx 0;
				background-color: #ffffff;

				.tags_type_option_list {
					height: calc(100% - 168rpx);
				}

				.house_type_option {
					padding: 0 40rpx;
					box-sizing: border-box;

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 40rpx;
						margin-bottom: 24rpx;
					}

					.options {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						justify-content: flex-start;

						.option-item {
							width: 208rpx;
							height: 68rpx;
							margin-bottom: 24rpx;
							margin-right: 24rpx;
							line-height: 68rpx;
							background: #F5F6FA;
							border-radius: 38rpx;
							text-align: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&:nth-child(3n) {
								margin-right: 0;
							}

							&.ischeck {
								background-color: #b2c1ff;
							}
						}
					}
				}
			}

			.rent_type {
				width: 100%;
				height: 880rpx;
				padding: 40rpx 0;
				background-color: #ffffff;
				box-sizing: border-box;

				.rent_type_option {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-direction: column;

					.options {
						width: 100%;
						height: 72rpx;
						line-height: 72rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;

						&.active {
							color: #0095F8;
							background: #F5F6FA;
							border-radius: 36rpx;
						}
					}
				}

				.custom_rent {
					width: 100%;
					height: 200rpx;
					padding: 32rpx;
					margin-top: 16rpx;
					background: #F5F6FA;
					border-radius: 38rpx;
					box-sizing: border-box;

					.title {
						line-height: 40rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
					}

					.show_value {
						display: flex;
						justify-content: space-between;
					}
				}
			}

			.tags_type {
				width: 100%;
				height: 880rpx;
				padding: 40rpx 0;
				background-color: #ffffff;
				box-sizing: border-box;

				.tags_type_option_list {
					height: calc(100% - 168rpx);

					.tags_type_option {
						padding: 0 40rpx;
						box-sizing: border-box;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
							line-height: 40rpx;
							margin-bottom: 24rpx;
						}

						.options {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							justify-content: flex-start;

							.option-item {
								width: 208rpx;
								height: 68rpx;
								margin-bottom: 24rpx;
								margin-right: 24rpx;
								line-height: 68rpx;
								background: #F5F6FA;
								border-radius: 38rpx;
								text-align: center;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;

								&:nth-child(3n) {
									margin-right: 0;
								}

								&.ischeck {
									background-color: #b2c1ff;
								}
							}
						}
					}

				}
			}

			.btns-group {
				padding: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					width: 320rpx;
					height: 88rpx;
					line-height: 88rpx;
					box-sizing: border-box;
					border-radius: 44rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					text-align: center;

					&.default-btn {
						color: #0095F8;
						border: 2rpx solid #0095F8;
					}

					&.primary-btn {
						color: #FFFFFF;
						background: #0095F8;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
					}
				}
			}

		}
	}
</style>